<!--
  @Description:自定义分页列表
  @Author:zqy
  @Date:2022-12-08 20:07:54
  @Last Modified by:zqy
  @Last Modified time:2022-12-08 20:07:54
-->
<template>
  <el-dialog
    ref="refDlg"
    v-el-drag-dialog
    width="800px"
    title="商品选择"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @close="closeDialog"
  >
    <div class="table-main">
      <table-box
        ref="refTable"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        :table-height="400"
        table-default-expand-all
        :table-row-key="tableRowKey"
        :selected-arry.sync="tableSelected"
        :table-row-class-name="tableRowClassName"
        :table-tree-props="{children: 'skus', hasChildren: 'hasChildren'}"
        :show-custom-setting="false"
        :show-custom-combine="false"
        :table-sortable="false"
        @data-change="getProductTableData"
        @row-dblclick="dbClickRow"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="closeDialog">取 消</el-button>
      <el-button type="primary" size="mini" @click="handleSure">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'DlgGoodsList',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    selectedId: {
      type: String,
      default: ''
    }
  },
  data() {
    const that = this
    return {
      otherFilters: [],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/gcenter/page`,
        onlySearchBar: true,
        tabIndex: 997,
        setting: [
          /* {
            prop: 'code',
            label: '商品编码',
            width: 150
          }, */
          {
            prop: 'picUrl',
            label: '商品图片',
            width: 100,
            overflowHidden: false,
            sortable: false,
            type: 'hidden',
            align: 'center',
            render: (_h, row) => {
              const iconUrl = row.picUrl || ''
              if (iconUrl) {
                const url = that.formatImageUrl(iconUrl)
                return (<div class='cover-image'><img src={url} /></div>)
              }
              return ''
            }
          },
          {
            prop: 'name',
            label: '商品名称',
            minWidth: 150,
            formatData: ({ name, skuName }) => {
              return skuName || name
            }
          },
          {
            prop: 'code',
            label: '商品编码',
            minWidth: 150,
            formatData: ({ code, skuCode }) => {
              return skuCode || code
            }
          }
        ]
      },
      tableSelected: [] // 单选行
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    closeDialog() {
      this.dialogShow = false
    },
    // 设置表格多选行高亮
    tableRowClassName({ row, rowIndex }) {
      /* if (row.skuCode && row.id && this.selectedId && row.id === this.selectedId) {
        this.tableSelected = [row]
        return 'selected-highlight'
      } */
      return ''
    },
    tableRowKey(row) {
      return row.rowId || `${row.id}_${row.keyIndex}_${row.code}`
    },
    // 获取搜索产品表格数据变化
    getProductTableData(res) {
      if (res && res.data && res.data.records) {
        res.data.records.forEach(row => {
          const spuId = row.id
          if (row.skus && row.skus.length > 0) {
            row.skus.forEach(v => {
              this.$set(v, 'spuId', spuId)
              this.$set(v, 'rowId', `${spuId}_${v.id}`)
            })
          }
          this.$set(row, 'rowId', spuId)
        })
      }
    },
    dbClickRow(row, e) {
      if ([null, undefined, ''].includes(row.skuCode)) {
        return
      }
      this.tableSelected = [row]
      this.handleSure()
    },
    handleSure() {
      if (this.tableSelected.length === 0) {
        this.$message.warning('请选择商品')
        return
      }
      if ([null, undefined, ''].includes(this.tableSelected[0].skuCode)) {
        this.$message.warning('只能选择SKU')
        return
      }
      this.$emit('change', this.tableSelected[0])
      this.closeDialog()
    }
  }
}
</script>

<style lang='scss' scoped>
 .cover-image{
    padding: 5px 0;
    line-height: 0;
    font-size: 0;
    img{
      height: 40px;
      width: 40px;
      object-fit: contain;
    }
  }

  /deep/ .el-table [class*=el-table__row--level] .el-table__expand-icon{
    float:left;
    margin-top: 10px;
  }
</style>
